<template>
    <view class="page-container">
        <view class="home">
            <text class="home-icon hx-icon-shouye" @click="navHome"></text>
        </view>
        <game ref="game" :activeId="activeId" :playInfo="playInfo" v-if="info.isGame" @changeGame="changeGame({ id: activeId, cmd: $event })" />
        <lottery ref="lottery" :activeId="activeId" v-if="info.isCj" @changeLottery="changeLottery" />
        <box ref="box" :activeId="activeId" v-if="info.isBx" />
        <redPaper ref="redPaper" :activeId="activeId" :playInfo="playInfo" v-if="info.isHb && playInfo.cmd === 'ready'" @changeAmount="changeAmount({ id: activeId, ...$event })" />
        <child ref="child" :activeId="activeId" :list="info.child" @changeBtn="changeBtn" />
        <basic ref="basic" @changeSwitch="changeSwitch" />
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import child from "./component/child.vue"
import basic from "./component/base.vue"
import game from "./component/game.vue"
import box from "./component/box.vue"
import lottery from "./component/lottery.vue"
import redPaper from "./component/redPaper.vue"
import { mapMutations } from "vuex"
export default {
    components: { basic, child, game, box, lottery, redPaper },
    data() {
        return {
            list: [
                {
                    name: "签到",
                    value: 0,
                    child: [
                        {
                            id: 100,
                            name: "3D签到"
                        },
                        {
                            id: 101,
                            name: "签到簿"
                        },
                        {
                            id: 102,
                            name: "手写签到"
                        }
                    ]
                },
                {
                    name: "免费礼物",
                    value: 1
                },
                {
                    name: "播放视频",
                    value: 3,
                    child: [
                        {
                            name: "婚纱照视频"
                        }
                    ]
                },
                {
                    name: "幸运夺宝",
                    value: 4,
                    isGame: true,
                    child: [
                        {
                            id: 200,
                            name: "转一转"
                        },
                        {
                            id: 201,
                            name: "扭一扭"
                        },
                        {
                            id: 202,
                            name: "幸运小转盘"
                        }
                    ]
                },
                {
                    name: "红包雨",
                    value: 5,
                    isGame: true,
                    isHb: true,
                    child: [
                        {
                            id: 300,
                            name: "摇红包"
                        },
                        {
                            id: 301,
                            name: "点红包"
                        },
                        {
                            id: 302,
                            name: "全民红包"
                        }
                    ]
                },
                {
                    name: "摇一摇",
                    value: 6,
                    isGame: true,
                    child: [
                        {
                            id: 400,
                            name: "摇一摇"
                        },
                        {
                            id: 401,
                            name: "追新娘"
                        },
                        {
                            id: 402,
                            name: "划龙舟"
                        }
                    ]
                },
                {
                    name: "划一划",
                    value: 7,
                    isGame: true,
                    child: [
                        {
                            id: 500,
                            name: "数钞票"
                        }
                        // {
                        //     id: 501,
                        //     name: "切水果"
                        // }
                    ]
                },
                {
                    name: "开宝箱",
                    value: 8,
                    isBx: true,
                    child: [
                        {
                            id: 14,
                            name: "红包墙"
                        },
                        {
                            id: 15,
                            name: "开宝箱"
                        }
                    ]
                },
                {
                    name: "抽奖",
                    value: 9,
                    isCj: true,
                    child: [
                        {
                            id: 700,
                            name: "3D抽奖"
                        },
                        {
                            id: 701,
                            name: "地球抽奖"
                        }
                    ]
                },
                {
                    name: "基础功能",
                    value: 10
                },
                {
                    name: "二维码",
                    value: 11
                }
            ],
            info: {
                child: []
            },
            activeId: "",
            socket: "",
            id: "",
            playInfo: { cmd: "ready" }
        }
    },
    computed: {
        ...mapGetters(["token"])
    },
    onLoad(options) {
        let { id } = options
        this.id = Number(id)
        let data = this.list.find(item => item.value === this.id)
        let info = Object.assign({}, { child: [] }, data)
        this.activeId = info.child[0]?.id ?? -1
        this.info = info
        this.initWss()
    },
    methods: {
        ...mapMutations(["setActivityInfo"]),
        initWss() {
            try {
                const io = require("@/lib/weapp.socket.io")
                this.socket = io(`wss://screen.haixihudong.com?type=2&aid=${this.$pages().aid}`, {
                    // 显式指定websocket传输层
                    transports: ["websocket"],
                    reconnectionAttempts: 3, // 失败后重新连接次数，一直失败总共尝试四次
                    reconnectionDelay: 2000 //
                })
                this.socket.on("connect", async () => {
                    console.log("Socket.IO连接成功")
                    this.socket.emit("balance", { type: "activity" })
                })
                this.socket.on("balance", res => {
                    if (res.type === "activity") {
                        this.setActivityInfo(res.balance)
                    }
                })
                this.socket.on("init", res => {
                    this.initData(res.cmd.id || this.activeId)
                })
                this.socket.on("toggle", res => {
                    const { id } = res
                    if (id === 100 || id === 101 || id === 102) {
                        this.activeId = res.id
                    }
                })
                this.socket.on("luckywheel", res => {
                    console.log(res)
                    this.setId(res)
                })
                this.socket.on("hongbao", res => {
                    this.setId(res)
                    if (res.cmd === "end") {
                        this.socket.emit("balance", { type: "activity" })
                    }
                })
                this.socket.on("shake", res => {
                    this.setId(res)
                })
                this.socket.on("draw", res => {
                    this.setId(res)
                })
                this.socket.on("lottery", res => {
                    this.setId(res)
                })
                this.socket.on("error", res => {
                    if (res.msg === "请先结束当前项目！") {
                        this.playInfo.cmd = "start"
                    }
                    this.$showToast(res.msg)
                })

                // 监听连接关闭事件
                this.socket.on("disconnect", () => {
                    console.log("Socket.IO连接关闭")
                })
                // 监听错误事件
                this.socket.on("connect_error", error => {
                    console.log("Socket.IO错误")
                })
            } catch (error) {
                console.log(error)
            }
        },
        initData(id) {
            if (this.id === 0) {
                this.changeSwitch(id)
            }
            if (this.id === 5) {
                this.changeAmount({ cmd: "ready", id, is_waiting: 0 })
            }
            if (this.id === 9) {
                this.changeLottery({ cmd: "ready", id, num: 1, index: 1 })
            }
            if (this.id === 4 || this.id === 6 || this.id === 7) {
                this.changeGame({ cmd: "ready", id })
            }
        },
        changeSwitch(id) {
            this.socket.emit("toggle", { id })
        },
        changeGame(data) {
            const obj = { 4: "luckywheel", 5: "hongbao", 6: "shake", 7: "draw" }
            if (this.id === 5 && data.cmd === "start") {
                this.$nextTick(() => {
                    this.$refs.redPaper.send("start", 1)
                })
            } else {
                this.socket.emit(obj[this.id], data)
            }
        },
        changeAmount(data) {
            this.socket.emit("hongbao", data)
        },
        changeLottery(data) {
            this.socket.emit("lottery", data)
        },
        changeBtn(item) {
            this.initData(item.id)
        },
        setId(res) {
            this.playInfo = { ...res }
            const { id, cmd } = res
            if (cmd === "ready") {
                this.activeId = id
            }
        },
        navHome() {
            this.$navBack()
        }
    },
    beforeDestroy() {
        this.socket.emit("toggle", { id: 0 })
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    padding-bottom: 40rpx;
    background: linear-gradient(to bottom, #6eb9fa, #fff);
}
.home {
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: flex-end;
}
.home-icon {
    font-size: 60rpx;
    color: #fff;
}
</style>
